<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script> <!-- vue引入 -->
    <script>
        Vue.config.productionTip=false; //阻止vue在启动时产生提示
        const vm = new Vue({
            //el: "#root",
            data: {
                showToggle: true, //v-show测试使用
                ifNum: 1, //v-if测试使用
                isDisabled: true,
                templateToggle: true, //template测试使用、控制整体标签
            },
            watch: { //监视、v-if测试使用
                'ifNum': function(newValue, oldValue) { //简写方式、简写方式不能使用immediate: true等属性；
                    if(newValue >= 4) this.ifNum = 1;
                }
            }
        });

        window.onload = function() { //页面加载完成在加载该方法
            vm.$mount('#root');
        }
    </script>
</head>
<body>

    <!--
        条件渲染：
            1. v-if:
                    写法：
                        (1). v-if="表达式"
                        (2). v-else-if="表达式"
                        (3). v-else
                    适用于：切换频率较低的场景
                    特点：不展示的DOM元素直接被移除
                    注意：v-if可以和：v-else-if、v-else一起使用，但要求结构不能被“打断”
            
            2. v-show
                    写法：v-show="表达式"
                    适用于：切换频率高的的场景
                    特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
    -->

    <div id="root">

        <!-- v-show将标签隐藏、但不从页面消失 -->
        <span v-show="showToggle">你好啊!</span><span v-show="!showToggle">我不好!</span><button @click="showToggle = !showToggle">变换</button>
        <br><br>
        <!-- v-if判断、条件如果成立则添加标签、不成立直接从页面移除，多层判断中间不能有其它标签不然会报错 -->
        <span v-if="ifNum == 1">张三</span>
        <span v-else-if="ifNum == 2">李四</span>
        <span v-else>王五</span> 
        <button @click="ifNum++" :disabled="isDisabled">递增{{ifNum}}</button>
        <button @click="isDisabled = !isDisabled">{{isDisabled?'启用':'禁用'}}</button>

        <br><br>
        <button @click="templateToggle = !templateToggle">template变换</button>
        <template v-if="templateToggle"> <!-- template与v-if配合使用,他不能与v-show一起使用 -->
            <span>张三</span><span>李四</span><span>王五</span> 
        </template>

    </div>
</body>
</html>